<section class="stage inner-wrapper">
  <p>
    <img
      src="/assets/contoso-real-estate-logo.svg"
      alt="Contoso Real Estate Fictitious Logo"
      width="200"
      height="auto"
    />
  </p>

  <h1 class="headline">Welcome to Contoso Real Estate</h1>

  <p>
    The Contoso Portal is a place where you can find all the information you need to rent your next apartment or home.
    We offer a wide variety of listings across the globe, so you can find the perfect place to call home.
  </p>
  <p class="stage__button">
    <a mat-flat-button color="primary" href="/search">Browse listings</a>
    <a mat-flat-button href="{{ blogUrl }}" target="__blank">Visit our blog</a>
  </p>
</section>

<mat-divider></mat-divider>

<section class="featured-listings inner-wrapper">
  <h2 class="subtitle">Featured Listings</h2>
  <div *ngIf="featuredListings.length === 0" class="notification info">
    <p>{{ noresults }}</p>
  </div>
  <app-card-list [user]="user" [listings]="featuredListings"></app-card-list>
  <div class="featured-listings__loading" appInfiniteScroll (onLoadRequested)="loadNextFeaturedListings()"></div>
</section>
